<template>
  <div class="days-select">
    <px-check-tag v-for="(day, index) in days" :key="index" :checked="selected.includes(day.val)" @change="toggleDay(day.val)">
      {{ day.label }}
    </px-check-tag>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
const emits = defineEmits(["weekChange"]);
const days = ref([
  { val: "MONDAY", label: "星期一" },
  { val: "TUESDAY", label: "星期二" },
  { val: "WEDNESDAY", label: "星期三" },
  { val: "THURSDAY", label: "星期四" },
  { val: "FRIDAY", label: "星期五" },
  { val: "SATURDAY", label: "星期六" },
  { val: "SUNDAY", label: "星期日" }
]);

const selected = defineModel();

const toggleDay = val => {
  if (selected.value.includes(val)) {
    selected.value = selected.value.filter(v => v !== val);
  } else {
    selected.value.push(val);
  }
  emits("weekChange", selected.value);
};

const selectAll = () => {
  selected.value = days.value.map(day => day.val);
};

const deselectAll = () => {
  selected.value = [];
};
</script>

<style scoped>
.days-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 580px;
  margin-bottom: 15px;
}

.actions {
  display: flex;
  gap: 10px;
}
</style>
